<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head::head"></head>
<body>
<div th:include="common/nav::nav" class="tabs"></div>

<div class="content">
    <form th:action="@{/job/add}" method="post">
        <table>
            <tr>
                <td>
                    <input type="text" name="streamId" required="required" placeholder="streamId">
                </td>
                <td>custom stream id</td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="endTime" required="required" placeholder="endTime">
                </td>
                <td>auto end record time (yyyy-MM-dd HH:mm:ss)</td>
            </tr>
            <tr>
                <td>
                    <button type="submit">add</button>
                </td>
                <td>
                </td>
            </tr>
        </table>
    </form>
</div>

<div class="content">
    <table>
        <tr>
            <th>id</th>
            <th>type</th>
            <th>lstartTime</th>
            <th>lendTime</th>
            <th>status</th>
            <th>streamId</th>
            <th>sts</th>
            <th>ets</th>
            <th>realDuration</th>
            <th>length</th>
            <th>stop and merge</th>
            <th>delete</th>
        </tr>
        <tr th:each="job : ${pageData.datas}">
            <td>
                <a th:href="@{/job/play/} + ${job.id}" th:text="${job.id}" target="_blank"></a>
            </td>
            <td th:text="${job.type}"></td>
            <td th:text="${#dates.format(job.lstartTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${#dates.format(job.lendTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${job.status}"></td>
            <td th:text="${job.streamId}"></td>
            <td th:text="${#dates.format(job.sts, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${#dates.format(job.ets, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${job.realDuration}"></td>
            <td th:text="${job.length}"></td>
            <td>
                <form th:action="@{/job/stop}" method="post">
                    <input type="hidden" name="id" th:value="${job.id}">
                    <button type="submit">stop and merge</button>
                </form>
            </td>
            <td>
                <form th:action="@{/job/delete}" method="post">
                    <input type="hidden" name="id" th:value="${job.id}">
                    <button type="submit">X</button>
                </form>
            </td>
        </tr>
    </table>
</div>

<div class="pagination">
    <a th:href="@{/job/jobs?page=} + ${pageHead} + '&pageSize=20'" th:text="${pageHead}"></a>
    <a th:href="@{/job/jobs?page=} + ${pagePre} + '&pageSize=20'">Pre</a>
    <span th:text="${page}"></span>
    <a th:href="@{/job/jobs?page=} + ${pageNext} + '&pageSize=20'">Next</a>
    <a th:href="@{/job/jobs?page=} + ${pageTail} + '&pageSize=20'" th:text="${pageTail}"></a>
    <span> - pages - </span>
    <form th:action="@{/job/jobs}" method="get" style="display: inline-block;">
        <input type="text" name="page" style="width: 50px;" placeholder="pNo.">
        <input type="hidden" name="pageSize" value="20">
    </form>
</div>

</body>
</html>